<template>
  <ContentWrap v-show="setView === 'list'">
    <HeaderTitle title="必达通知" content="必达通知消息模板，发布规则，用户组，消息记录等功能" :isdivider="false" />
  </ContentWrap>
  <ContentWrap v-show="setView === 'list'">
    <el-tabs v-model="activeName" class="custom-tabs">
      <el-tab-pane label="消息模板" name="first" :key="index1"><MessageTemplate ref="temlplateRef" @openForms="openForms"/></el-tab-pane>
      <el-tab-pane label="发布规则" name="second" :key="index2"><PublishRule ref="ruleRef" @openForms="openForms" /></el-tab-pane>
      <el-tab-pane label="用户组" name="fourth" :key="index4"><UserGroup /></el-tab-pane>
      <el-tab-pane label="消息记录" name="third" :key="index3"><MessageLog /></el-tab-pane>
    </el-tabs>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <ContentWrap v-show="setView === 'addTemplate'">
    <MessageTemplateForm ref="formRef1" @success="refresh" @setClose="setClose" />
  </ContentWrap>
  <ContentWrap v-show="setView === 'addRule'">
    <PublishRuleForm ref="formRef2" @success="refresh" @setClose="setClose" />
  </ContentWrap>
</template>

<script lang="ts" setup>
import MessageTemplate from './messageTemplate/index.vue'
import PublishRule from './publishRule/index.vue'
import MessageLog from './messageLog/index.vue'
import UserGroup from './userGroup/index.vue'

import MessageTemplateForm from './messageTemplate/messageTemplateForm.vue'
import PublishRuleForm from './publishRule/publishRuleForm.vue'

const activeName = ref('first')
const index1 = ref(0)
const index2 = ref(0)
const index3 = ref(0)
const index4 = ref(0)
watch(activeName, () => {
  if (activeName.value == 'first') {
    index1.value++
  } else if (activeName.value == 'second') {
    index2.value++
  } else if (activeName.value == 'third') {
    index3.value++
  } else if (activeName.value == 'fourth') {
    index4.value++
  }
})

const setView = ref('list')
const openName = ref('addTemplate')
const formRef1 = ref()
const formRef2 = ref()
const formRef3 = ref()
const temlplateRef = ref()
const ruleRef = ref()
const openForms = (obj)=>{
  const {type, id ,typeForm} = obj
  setViewFun(typeForm)
  openName.value = typeForm
  if(typeForm=='addTemplate'){
    formRef1.value.open(type, id)
  }else if(typeForm=='addRule'){
    formRef2.value.open(type, id)
  }
}
// 新增、修改成功更新数据
const refresh = ()=>{
  if(openName.value=='addTemplate'){
    temlplateRef.value.getList()
  }else if( openName.value =='addRule'){
    ruleRef.value.getList()
  }
}
const setViewFun=(type:string)=>{
  setView.value=type;
}
const setClose = ()=>{
  setView.value = 'list'
}
</script>

<style scoped lang="scss">
:deep(.custom-tabs) {
  /* 取消下划线 */
  .el-tabs__active-bar {
    display: none;
  }

  /* 可选：取消悬停时的下划线 */
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__item{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px!important;
    margin-right: 8px;
    color: #666;
  }
  /* 设置选中标签页的颜色和背景色 */
  .el-tabs__item.is-active {
    color: #1664FF; /* 选中标签页的文字颜色 */
    background: rgba(53, 96, 246, 0.1); /* 选中标签页的背景颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px!important;
    margin-right: 8px;
  }
}
</style>
